<template>
<div>
  <div class="upload-file">
    <div class="upload-file-site" v-if="isShowImg === false">
      <i><label for="file-input">{{pTitle}}</label></i>
      <input id="file-input" type="file" accept="image/*"
             ref="imgFile"
             @change="changeImg">
    </div>
    <canvas class="img-show"
            ref="imgShow"
            @click="showImgClick"
            v-else-if="isShowImg === true"></canvas>
  </div>
<!--  <button @click="saveImg">保存</button>-->
</div>
</template>

<script>
  export default {
    name: "ImgUpload",
    props: {
      pTitle: {
        type: String,
        default: '点击此处上传图片'
      }
    },

    data() {
      return {
        // IMAGE_: '', // 绘制的图片
        file: {}, //上传的文件对象
        progressBar: 0, // 记录上传进度的变量
        isShowImg: false, // 是否展示图片

        imgWidth: 0, // 上传图片的宽度
        imgHeight: 0, // 上传图片的高度
        // imgL: 0,
        // imgTL: 0,
      }
    },
    computed: {
      style(){ // 进度条样式
        return {
          width: this.progressBar+"%"
        }
      }
    },
    methods: {
      changeImg() { // 当input 类型发生改变,
        this.isShowImg = true; // 显示图片变成true
        // console.log(this.$refs.imgFile);
        console.dir(this.$refs.imgFile);

        let imgFile = this.$refs.imgFile.files[0]; // 因为上传的是单个文件,files是一个数组,所以取files[0],拿到上传的文件
        if (!imgFile) return; // 如果没有imgFile,即没有选择图片,直接return掉此函数

        // 通过上面的逻辑验证,此时imgFile必定是存在的,此时,把imgFile绘制到canvas
        /**
         * 首先使用FileReader进行文件读取
         */
        let fileExample = new FileReader();
        fileExample.readAsDataURL(imgFile); // 把imgFile读取转变为Base64形式
        fileExample.onload = ev => { // 读取完后
          // console.log(ev);

          this.IMAGE = new Image(); // 创建一个Image对象实例
          this.IMAGE.src = ev.target.result; // 把ev中的target的result赋给IMAGE_
          this.IMAGE.onload = () => { // 当图片创建完后

          // 获取图片的宽(原图片的宽,用来作为参数发射出去),注意:因为画布的尺寸是固定的,但是图片如果传入过小,会导致在保存生成原图片时会因为尺寸过小而导致丢失掉某些部分,因此使用这个亦或表达式来控制图片的宽度至少为300,即画布的大小;如果画布比此大,在裁剪时不会有什么影响,因此不用考虑传入图片过大的问题;
          this.imgWidth = this.IMAGE.width >= 300 ? this.IMAGE.width : 300;

          // 获取图片的高(原图片的高,用来作为参数发射出去),注意:因为画布的尺寸是固定的,但是图片如果传入过小,会导致在保存生成原图片时会因为尺寸过小而导致丢失掉某些部分,因此使用这个亦或表达式来控制图片的高度至少为150,即画布的大小;如果画布比此大,在裁剪时不会有什么影响,因此不用考虑传入图片过大的问题;
          this.imgHeight = this.IMAGE.height >= 150 ? this.IMAGE.height : 150;
          console.log('imgWidth=' + this.imgWidth);
          console.log('imgHeight=' + this.imgHeight);

          this.draw(); // 调用绘制图片的函数

          this.saveImg(); // 保存原图片
          }
        }
      },
      draw() { // canvas绘制图片函数
        this.CTX = this.$refs.imgShow.getContext("2d"); // 创建2d的渲染画布
        this.CTX.clearRect(0, 0, 300, 150); // 清空画布
        this.CTX.drawImage(this.IMAGE, 0, 0, 300, 150)// 绘制图片

      },
      saveImg() { // 保存添加入文件的图片
        if (!this.IMAGE) return; // 如果为空,return函数

        /**获取展示图片区域的像素信息*/
        let imgData = this.CTX.getImageData(0, 0, 300, 150); // 截取图片像素信息(从canvas画布截取)

        /**创建canvasImg画布与上传的原图片一样大小*/
        let canvasImg = document.createElement('canvas'); // 创建一个新的canvas画布,按照原图片的宽和高画出图片
        let canvasImgCTX = canvasImg.getContext("2d"); // 绘制canvas的
        canvasImg.width = this.imgWidth; // 设计画布的宽
        canvasImg.height = this.imgHeight; // 设计画布的高
        // console.log('imgWidth=-----------' + this.imgWidth);
        // console.log('imgHeight=----------' + this.imgHeight);
        // console.log('-------canvasImgWidth=' + canvasImg.imgWidth);
        // console.log('-------canvasImgHeight=' + canvasImg.imgHeight);

        /**把像素信息放置到画布中*/
        canvasImgCTX.drawImage(this.IMAGE, 0,0, this.imgWidth, this.imgHeight);
        // canvasImgCTX.putImageData(imgData, 0, 0, 0, 0, this.imgWidth, this.imgHeight);
        // canvasImgCTX.putImageData(imgData, 0, 0, 0, 0, this.imgWidth, this.imgHeight);

        /**把画布中的内容生成为Base64编码*/
        // console.log(canvasImg.toDataURL('/image/png')); // 生成这种类型图片的Base64编码

        this.$emit('saveImg', {
          imgBase: canvasImg.toDataURL('/image/png') // 把Base64编码发射出去
        })
      },
      showImgClick() { // 当有图片展示且点击时
        this.isShowImg = false;
      }
    },

  }
</script>

<style scoped>
  .upload-file {
    position: relative;
    width: 170px;
    height: 80px;

    text-align: center;
    font-size: 20px;

    padding: 10px;

    border: 3px dashed #cdcdcd;/*007bff*/
    border-radius: 6px;
    background-color: white;
  }
  .upload-file .upload-file-site {
    position: relative;
    height: 80px;
    margin: auto;

    font-weight: bold;
    font-size: 20px;
    color: white;

    border-radius: 10px;
    background-color: #cdcdcd;

  }
  .upload-file .upload-file-site input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: blue;
    /*padding: 5px;*/
    border-radius: 10px;

    opacity: 0;z-index: -1;
  }
  .upload-file .upload-file-site label {
    position: absolute;
    left: 5px;
    top: 25px;
    width: 100%;
    height: 100%;

    cursor: pointer;
  }
  .upload-file .upload-file-site label:hover {
    opacity: 0.8;
  }

  .img-show { /*显示图片,即canvas的大小*/
    position: absolute;
    top: 0;
    left: 0;
    width: 190px;
    height: 100px;

    /*background-color: red;*/
  }
</style>